<template>
    <div class="detail">
        <div class="good">
        <img :src="product.imgPath" alt="" width="300px" height="300px">
        <p>{{product.title}}</p>
        <p>卖家:{{product.owner}}</p>
        <p class="price">价格:{{product.price}}</p>
        <el-button type="danger" @click="toOrder(product.id)">购买</el-button>
        <el-button type="primary" @click="toCollection(product.id)" v-if="btnStatus == 0">收藏</el-button>
        <el-button type="primary"  @click="toCollection(product.id)" v-show="btnStatus == 1" disabled >已收藏</el-button>
    </div>
    </div>
</template>
<script>
export default {
    name: 'Detail',
    data() {
        return {
            btnStatus: 0,
            product: {}
        }
    },
    created() {
        let id = this.$route.query.productId
        let UserId = this.shuju._id
        this.axios.get('api/goods').then(res => {
            this.product = res.data.data.find(data => {
                return data.id == id
            })
            this.axios.get('api/Getcollections').then(res => {
                let tmp = res.data.data.filter(item => {
                    return item.products.id == id && item.userId == UserId
                })
                if (tmp.length > 0) {
                    this.btnStatus = 1
                } else {
                    
                }
            })
        })

    },
    methods: {
        toOrder(pId) {
            this.$router.push('setorder?productId=' + pId)
        },
        toCollection() {
            let product = this.product
            this.axios.post('api/AddCollection',
                { collection: product })
                .then(res => {
                    this.$message('收藏成功')
                    this.btnStatus = this.btnStatus === 0 ? 1 : 0 
                })
                .catch(err => {
                    this.$message('收藏失败')
                })
        }
    },
    computed: {
        shuju() {
            console.log(this.$store.state.user);
            return this.$store.state.user
        },
        collect() {
            return this.$store.state.collection
        }
    }
}
</script>
<style scoped> 
.price{
    color: #eea20e;
} 
.good{
    border: 1px solid #ccc;
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.85);
    margin-top: 30px;
}
.detail{
    background: url(../../public/22.png)no-repeat;
    height: 100vh;
    border-top: 1px solid transparent;
}        
p{
    margin-top: 10px;
    margin-bottom: 10px;
}
</style>